<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script src="./d3.js"></script>
<script>
    // const myScal = d3.scaleLinear().domain([0, 10]).range([-1000, 1000])
    // console.log(myScal(5));
    const a = "qwertyuioplkjhgfdsamnbvcxz"
    const data = [
        {name: "shao-kui", value: 6},
        {name: "shao-kui", value: 16},
        {name: "shao-kui", value: 6},
        {name: "shao-kui", value: 6},
        {name: "shao-kui", value: 6},
        {name: "shao-kui", value: 6},
        {name: "shao-kui", value: 6},
        {name: "shao-kui", value: 6},
        {name: "shao-kui", value: 6},
        {name: "shao-kui", value: 6},
        {name: "shao-kui", value: 6},
        {name: "shao-kui", value: 6},
        {name: "shao-kui", value: 6},
        {name: "shao-kui", value: 6},
        {name: "shao-kui", value: 6},

    ].map(item => {
        const in1 = parseInt(Math.random() * 26)
        const in2 = parseInt(Math.random() * 26)
        const in3 = parseInt(Math.random() * 26)
        const in4 = parseInt(Math.random() * 26)
        const in5 = parseInt(Math.random() * 26)

        return {
            name: `${a[in1]}${a[in2]}-${a[in3]}${a[in4]}${a[in5]}`,
            value: in1
        }
    })
    console.log(data);
    const svg = d3.select('body').append('svg').attr('width', 900).attr('height', 600).attr('id', "mainsvg").attr('class', "svgs")
    const width = svg.attr("width")
    const height = svg.attr("height")
    const margin = {top: 60, right: 60, bottom: 60, left: 50};
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;
    const xSCale = d3.scaleLinear()
        .domain([0, d3.max(data, (item) => item.value)])//设置数据规则
        .range([0, innerWidth])//设置起始与终止点坐标
    const yScale = d3.scaleBand()
        .domain(data.map(item => item.name))
        .range([0, innerHeight])
        .padding(0.1)//设置间隔  1为10%

    const g = svg.append('g').attr('id', 'maingroup').attr('transform', `translate(${margin.left}, ${margin.top})`)
    const yAxis = d3.axisLeft(yScale)
        .tickSize(-innerWidth)//设置中心直线 刻度标记方向为正方向
    g.append('g').call(yAxis)
    const xAxis = d3.axisBottom(xSCale)
        .tickSize(-height)
    // 将刻度尺添加于屏幕 //!须借助于g标签，  call为d3中元素带有函数
    g.append('g').call(xAxis).attr('transform', `translate(0, ${innerHeight})`)

    data.forEach(d => {
        g.append('rect')
            .attr('width', xSCale(d.value))//取出每一个元素根据value计算出来的宽度
            .attr('height', yScale.bandwidth())//取出每一个条带有多宽
            .attr('fill', 'green')
            .attr('y', yScale(d.name))//人名映射到屏幕空间的位置
            .attr('opacity', '0.6')
    })
    // 修改刻度标记元素  tick为d3为每一刻度设置的class
    d3.selectAll('.tick text').attr('font-size', '1.2em')
    // 添加表头
    g.append('text')
        .text('练习的第一个表格')
        .attr('font-size', '2em')
        .attr('transform', `translate(${innerWidth / 2}, -20)`)
        .attr('text-anchor', 'middle')
</script>

</html>
